<!DOCTYPE html>
<!-- Dev Version links to full versions (non-minified) of javascript and css files -->
<html>
<head>
    <meta charset="UTF-8">
    <title>吉林省财经大学智慧化大数据监控平台</title>
    <meta name="mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-capable" content="yes"/>
    <meta name="apple-mobile-web-app-status-bar-style" content="black"/>
    <meta name="viewport" content="width = device-width, initial-scale = 1, user-scalable = no"/>
    <link href="lib/css/thirdparty/jquery.gridster.min.css" rel="stylesheet"/>
    <link href="lib/css/thirdparty/codemirror.css" rel="stylesheet"/>
    <link href="lib/css/thirdparty/codemirror-ambiance.css" rel="stylesheet"/>
    <link href="lib/css/freeboard/styles.css" rel="stylesheet"/>
    <script src="global.js"></script>
    <script src="./js/echarts.min.js"></script>
    <script src="lib/js/thirdparty/head.js"></script>
    <script src="lib/js/jquery-2.1.1.min.js"></script>
    <script type="text/javascript">
        head.js("lib/js/thirdparty/knockout.js",
            "lib/js/thirdparty/jquery.js",
            "lib/js/thirdparty/jquery-ui.js",
            "lib/js/thirdparty/underscore.js",
            "lib/js/thirdparty/jquery.gridster.js",
            "lib/js/thirdparty/jquery.caret.js",
            "lib/js/thirdparty/codemirror.js",
            "lib/js/thirdparty/jquery.xdomainrequest.js",
            "lib/js/freeboard/FreeboardModel.js",
            "lib/js/freeboard/DatasourceModel.js",
            "lib/js/freeboard/PaneModel.js",
            "lib/js/freeboard/WidgetModel.js",
            "lib/js/freeboard/FreeboardUI.js",
            "lib/js/freeboard/DialogBox.js",
            "lib/js/freeboard/PluginEditor.js",
            "lib/js/freeboard/ValueEditor.js",
            "lib/js/freeboard/JSEditor.js",
            "lib/js/freeboard/DeveloperConsole.js",
            "lib/js/freeboard/freeboard.js",
            "plugins/freeboard/freeboard.datasources.js",
            "plugins/freeboard/freeboard.widgets.js",
            "examples/plugin_example.js",
            "lib/js/util.js",
            // *** Load more plugins here ***
            function () {
                $(function () { //DOM Read
                    freeboard.setAssetRoot("/freeboard-ui/");
                    freeboard.initialize(true);
                    setInterval(function () {
                        var today = new Date(new Date().getTime());
                        var month = (today.getMonth()) + 1 < 10 ? '0'+(today.getMonth() + 1) : today.getMonth()+ 1
                        var day = "日一二三四五六".charAt(today.getDay())
                        $('#jsToday').text( today.getFullYear() + "年" + month + "月" + today.getDate() + "日    星期"+ day);
                        var min = today.getMinutes() < 10 ? '0'+ today.getMinutes() : today.getMinutes() ;
                        var sec = today.getSeconds() < 10 ? '0'+ today.getSeconds() : today.getSeconds() ;
                        $('#jsTime').text(today.getHours()+"时"+ min +"分"+sec + "秒");
                    }, 1000)
                });
            });
    </script>
    <script src="lib/js/jsplumb.min.js"></script>

    <style>
    #diagramContainer {
        /*padding: 20px;*/
        width: 520px;
        height: 900px;
        /*border: 1px solid gray;*/
        position: relative;
        left: 100px;
        top: 5%;
        background-color: transparent;
        animation:rot 1s infinite;
        -webkit-animation:rot 1s infinite;
        animation-iteration-count:1;
        -webkit-animation-iteration-count:1; /*Safari and Chrome*/
        animation-fill-mode:forwards;
        -webkit-animation-fill-mode:forwards; /* Safari 和 Chrome */

        /*transform: rotate(40deg) ;*/
        /*-webkit-transform: rotate(40deg) rotateY(30deg) ;*/
        font-size: 12px;
    }
    @keyframes rot
    {
        from {transform: rotate(0deg) ;
            -webkit-transform: rotate(0deg)  rotatey(0deg);}
        to {transform: rotate(45deg) rotatey(10deg) ;
            -webkit-transform: rotate(45deg)  rotatey(10deg);}
    }

    @-webkit-keyframes rot /*Safari and Chrome*/
    {
        from {transform: rotate(0deg) ;
            -webkit-transform: rotate(0deg)  rotatey(0deg);}
        to {transform: rotate(45deg) rotatey(10deg) ;
            -webkit-transform: rotate(45deg)  rotatey(10deg);}
    }
    .item1 {
        /*background: url('tongxin.png') no-repeat;*/
        background-size: 150% 150%;
        position: absolute;
        top: 460px;
        left: 215px;
        height: 70px;
        width: 60px;
        color: #fff;
        text-align: center;
    }
    .item3 {
        /*background: url('tongxin.png') no-repeat;*/
        background-size: 150% 150%;
        position: absolute;
        top: 190px;
        left: 270px;
        height: 60px;
        width: 60px;
        color: #fff;
        text-align: center;
    }
    .item1 img {
        width: 60px;
        height: 45px;
        transform: rotate(-40deg) rotateX(0deg);
        -webkit-transform: rotate(-40deg) rotateX(0deg);
    }
    .item2 img {
        width: 50px;
        height: 40px;
        transform: rotate(-40deg) rotateX(0deg);
        -webkit-transform: rotate(-40deg) rotateX(0deg);
    }
    .abcd img ,.item3 img{
        width: 40px;
        height: 30px;
        transform: rotate(-40deg) rotateX(0deg);
        -webkit-transform: rotate(-40deg) rotateX(0deg);
    }
    .item3 img{
        transform: rotate(-40deg) rotateX(0deg);
        -webkit-transform: rotate(-40deg) rotateX(0deg);
    }

    .item2 {
        /*background: url('lou.png') no-repeat;*/
        background-size: 100% 100%;
        position: absolute;
        color: #fff;
        height: 60px;
        width: 50px;
        text-align: center;
        padding-bottom: 5px;
    }


    .abcd{
        position: absolute;
        bottom: 0;
        height: 45px;
        width: 35px;
        color: #fff;
        text-align: center
    }
    .btnbox{
        position: absolute;
        left: 30px;
        top: 30px;
        background: url("img/fourborder.png");
        background-size: 100% 100%;
        width: 145px;
        height: 140px;
        text-align: center;
    }
    .add{
        width: 135px;
        height: 40px;
        border: none;
        color: #15B3B3;
        background-color: transparent;
        margin-top: 5px;
        font-size: 18px;
        outline:none;
        user-select:none;
    }
    .save{
        width: 135px;
        height: 40px;
        border: none;
        color: #15B3B3;
        margin-top: 5px;
        font-size: 18px;
        background-color: transparent;
        outline:none;
        user-select:none;
    }
    .reset{
        width: 135px;
        height: 40px;
        border: none;
        color: #15B3B3;
        margin-top: 5px;
        font-size: 18px;
        background-color: transparent;
        outline:none;
        user-select:none;
    }
    .bling{
        width: 180px;
        height: 80px;
        position: absolute;
        right: 50px;
        top: 750px;
        background: url("img/fourborder.png");
        background-size: 100% 100%;
        color: #fff;
        padding: 10px;
        animation:fade 1.5s infinite;
        -webkit-animation:fade 1.5s infinite;
        animation-direction:alternate;
        -webkit-animation-direction:alternate;
    }
    .bl-left{
        float: left;
        margin-left: 15px;
        margin-top: 15px;
        background: url("img/yuanborder.png") no-repeat;
        background-size: 100% 100%;
        width: 50px;
        height: 50px;
        font-size: 12px;
        line-height: 50px;
        text-align: center;
        color: #15B3B3;
    }
    .bl-right{
        width: 100px;
        height: 50px;
        color: #15B3B3;
        margin-left: 80px;
        font-size: 12px;
    }
    .bl-right p{
        height: 15px;
        line-height: 15px;
    }
    .bling2{
        animation:fade 3.5s infinite;
        -webkit-animation:fade 3.5s infinite;
        animation-direction:alternate;
        -webkit-animation-direction:alternate;
    }
    .bling3{
        background:url("./img/091.gif");
        animation:fade 2.5s infinite;
        -webkit-animation:fade 2.5s infinite;
        animation-direction:alternate;
        -webkit-animation-direction:alternate;
    }
    @keyframes fade
    {
        from {opacity: 0.3}
        to {opacity: 1}
    }

    @-webkit-keyframes fade /*Safari and Chrome*/
    {
        from {opacity: 0.3}
        to {opacity: 1}
    }
    .text-value p:nth-child(odd){
        font-size: 14px;
        color:#00F6FF;
        line-height: 20px;
        margin: 0;
        font-weight: 600;
        font-family: Andalus;
    }
    .text-value p:nth-child(even){
        font-size: 12px;
        color:#00F6FF;
        line-height: 20px;
        margin: 10px;
    }
    .scroll{margin:0 auto; width:630px; height:210px;  position:relative; overflow:hidden;}

    .scroll ul{list-style-type:none; padding:0; margin:0; position:absolute; top:0;left:0; width:99999px; height:210px; }

    .scroll li{float:left; width:630px;}
    .radarTitle{
        /*position: absolute;*/
        width: 100%;
        height: 78px;
        line-height: 78px;
        text-align: center;
        /*background-color: #000;*/
        /*color: #fff;*/
        z-index: 999;
        top: 0;
        color: #00f6ff;
        border-bottom: 1px solid #00f6ff;
    }
    .radarCon{
        width: 100%;
        height: 622px;
        margin-top: 78px;
    }
</style>
</head>
<body>
<div id="board-content" style="top:60px">
    <!--<div class="gs_title" style="margin-bottom:40px;margin-top: 40px;">-->
    <div class="gs_title"  >
        <div class="gs_title-area">
            <div class="gs_title-aside fl" id="jsToday"></div>
            <div class="gs_title-mn">
                <div style="color:#00F6FF ">吉林省财经大学</div>
                <!--<div style="color:#00F6FF ">辽宁省公安厅</div>-->
                <div style="color:#00F6FF ">智慧化大数据监控平台</div>
            </div>
            <div class="gs_title-aside fr" id="jsTime"></div>
        </div>
    </div>
    <!--添加背景图-->
    <div id="back_ground" class="gridster responsive-column-width" style="height: 810px;">
    <ul data-bind="grid: true">
    </ul>
</div>
</div>
<header id="main-header" data-bind="if:allow_edit">
    <div id="admin-bar">
        <div id="admin-menu">
            <div id="board-tools">
                <div id="board-logo" class="title bordered">
                <!--<div id="board-logo" class="borderedaaa" style="width: 260px;-->
    <!--height: 30px;-->
    <!--border: 2px solid #d3d4d4;-->
    <!--padding: 8px;-->
    <!--line-height: 30px;color: #ffffff">-->
                    <!--<div class="logo-wrapper">-->
                        <!--<div class="logo"></div>-->
                    <!--</div>-->
                    <!--上海贝塔软件股份有限公司可视化平台-->
                </div>
                <div id="board-actions">
                    <ul class="board-toolbar vertical">
                        <li data-bind="click: loadDashboardFromLocalFile">
                            <i id="full-screen-icon" class="icon-folder-open icon-white"></i>
                            <label id="full-screen">加载</label>
                        </li>
                        <li><i class="icon-download-alt icon-white"></i>
                            <!--<label data-bind="click: saveDashboardClicked">保存</label>-->
                            <!--<label style="display: none;" data-bind="click: saveDashboard"-->
                                   <!--data-pretty="true">[非格式压缩]</label>-->
                            <!--<label style="display: none;" data-bind="click: saveDashboard"-->
                                   <!--data-pretty="false">[格式压缩]</label>-->

                            <label data-bind="click: saveDashboard">保存</label>
                            <label style="display: none;" data-bind="click: saveDashboard"
                                   data-pretty="true">[非格式压缩]</label>
                            <label style="display: none;" data-bind="click: saveDashboard"
                                   data-pretty="false">[格式压缩]</label>
                        </li>
                        <li id="add-pane" data-bind="click: createPane">
                            <i class="icon-plus icon-white"></i>
                            <label>添加面板</label>
                        </li>
                    </ul>
                </div>
            </div>
            <div id="datasources">
                <h2 class="title">数据源</h2>

                <div class="datasource-list-container">
                    <table class="table table-condensed sub-table" id="datasources-list"
                           data-bind="if: datasources().length">
                        <thead>
                        <tr>
                            <th>Name</th>
                            <th>Last Updated</th>
                            <th>&nbsp;</th>
                        </tr>
                        </thead>
                        <tbody data-bind="foreach: datasources">
                        <tr>
                            <td>
                <span class="text-button datasource-name"
                      data-bind="text: name, pluginEditor: {operation: 'edit', type: 'datasource'}"></span>
                            </td>
                            <td data-bind="text: last_updated"></td>
                            <td>
                                <ul class="board-toolbar">
                                    <li data-bind="click: updateNow"><i class="icon-refresh icon-white"></i></li>
                                    <li data-bind="pluginEditor: {operation: 'delete', type: 'datasource'}">
                                        <i class="icon-trash icon-white"></i>
                                    </li>
                                </ul>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>
                <span class="text-button table-operation"
                      data-bind="pluginEditor: {operation: 'add', type: 'datasource'}">新建</span>
            </div>
        </div>
    </div>
    <div id="column-tools" class="responsive-column-width">
        <ul class="board-toolbar left-columns">
            <li class="column-tool add" data-bind="click: addGridColumnLeft">
                <span class="column-icon right"></span>
                <i class="icon-arrow-left icon-white"></i>
            </li>
            <li class="column-tool sub" data-bind="click: subGridColumnLeft">
                <span class="column-icon left"></span>
                <i class="icon-arrow-right icon-white"></i>
            </li>
        </ul>
        <ul class="board-toolbar right-columns">
            <li class="column-tool sub" data-bind="click: subGridColumnRight">
                <span class="column-icon right"></span>
                <i class="icon-arrow-left icon-white"></i>
            </li>
            <li class="column-tool add" data-bind="click: addGridColumnRight">
                <span class="column-icon left"></span>
                <i class="icon-arrow-right icon-white"></i>
            </li>
        </ul>
    </div>
    <div id="toggle-header" data-bind="click: toggleEditing">
        <i id="toggle-header-icon" class="icon-wrench icon-white"></i>
    </div>
</header>

<div style="display:hidden;">
    <ul data-bind="template: { name: 'pane-template', foreach: panes}">
    </ul>
</div>
<!--设置透明图-->
<script type="text/html" id="pane-template">
    <li data-bind="pane: true" id="tou">
        <header>
            <div class="background">
                <div class="c1"></div>
                <div class="c2"></div>
                <div class="c3"></div>
            </div>
            <h1 data-bind="text: title"></h1>
            <ul class="board-toolbar pane-tools">
                <li data-bind="pluginEditor: {operation: 'add', type: 'widget'}">
                    <i class="icon-plus icon-white"></i>
                </li>
                <li data-bind="pluginEditor: {operation: 'edit', type: 'pane'}">
                    <i class="icon-wrench icon-white"></i>
                </li>
                <li data-bind="pluginEditor: {operation: 'delete', type: 'pane'}">
                    <i class="icon-trash icon-white"></i>
                </li>
            </ul>
        </header>
        <div class="gs_w-section_border gs_w-section_border-l"></div>
        <div class="gs_w-section_border gs_w-section_border-r"></div>
        <!--设置边框-->
        <section data-bind="foreach: widgets" style="margin : -30px 1px 0 1px; height:100%;">
            <div></div>
            <div class="sub-section" data-bind="css: 'sub-section-height-' + height()">
                <div class="widget" data-bind="widget: true, css:{fillsize:fillSize}"></div>
                <div class="sub-section-tools">
                    <ul class="board-toolbar">
                        <!-- ko if:$parent.widgetCanMoveUp($data) -->
                        <li data-bind="click:$parent.moveWidgetUp"><i class="icon-chevron-up icon-white"></i></li>
                        <!-- /ko -->
                        <!-- ko if:$parent.widgetCanMoveDown($data) -->
                        <li data-bind="click:$parent.moveWidgetDown"><i class="icon-chevron-down icon-white"></i></li>
                        <!-- /ko -->
                        <li data-bind="pluginEditor: {operation: 'edit', type: 'widget'}"><i
                                class="icon-wrench icon-white"></i>
                        </li>
                        <li data-bind="pluginEditor: {operation: 'delete', type: 'widget'}"><i
                                class="icon-trash icon-white"></i>
                        </li>
                    </ul>
                </div>
            </div>
        </section>
        <div class="gs_w-footer">
            <div class="c1"></div>
            <div class="c2"></div>
            <div class="c3"></div>
        </div>
    </li>
</script>
<script>
</script>
<script>
    function floorReady() {
        jsPlumb.ready(function () {
            function Connect(i, j) {
                jsPlumb.connect({
                    // anchor:[ "Perimeter", { shape:"Square", anchorCount:150 } ],
                    // anchor: ['Top','Right'],
                    anchor:["Continuous",{faces:["top","bottom"]}],
                    // anchor: ['Top', 'Bottom','Left','Right'],
                    source: i,
                    target: j,
                    connector: ['Flowchart'],
                    // connector: ['Bezier'],
                    connectionsDetachable: false,
                    endpointStyle: {fill: 'transparent', stroke: '#15B3B3', radius: 0.1,
                        strokeWidth: 1},
                    paintStyle: { stroke: '#15B3B3', strokeWidth: 2 },
                    endpointHoverStyle: {fill: '#1565C0', stroke: '#1565C0', radius: 1,
                        strokeWidth: 1},
                    endpoint:"Dot",

                })
                jsPlumb.draggable(i,{containment: 'parent',grid: [5, 5]})
                jsPlumb.draggable(j,{containment: 'parent',grid: [5, 5]})
            }
            var num = $('.item2').length
            for (let a=0;a<=num;a++){
                var id = 'item_'+ a
                Connect('item_f',id)
            }
            console.log(num)
            Connect('item_b','item_a');
            Connect('item_c','item_a');
            Connect('item_d','item_a');
            Connect('item_e','item_a');
            Connect('item_a','item_f');
            var btn = document.getElementById('add');
            btn.onclick = function () {

                var div = document.createElement('div');
                div.innerHTML = '<img src="./img/lou.png"><div contenteditable = "true">' + '教学楼' + num + '</div>';
                if (parseInt(num / 5) > 0) {
                    div.style.left = num % 5 * 85 + 50 + 'px';
                    div.style.top = 20+'px'
                } else {
                    div.style.left = num * 85 + 50 + 'px';
                    div.style.top = 20+'px'
                }
                // console.log()
                div.className = 'item2 my-item';
                div.id = 'item_' + num;
                var back = document.getElementById("diagramContainer");
                back.insertBefore(div, back.lastChild);
                Connect(item_f, div.id);
                num++;
            }
        });

        $('#save').click( function () {
            console.log('SAVE');
            // $('#diagramContainer>:not(.my-item)').remove();
            // $('#diagramContainer>:not(.my-item)').appendTo(div1)
            var $flourcontainer = $('#flourcontainer');
            $('#diagramContainer>:not(.my-item)').appendTo($flourcontainer);
            var floorHtml = $('#diagramContainer').html();
            $flourcontainer.children().appendTo('#diagramContainer');
            console.log('floorHtml', floorHtml)
            var allcookies = document.cookie;
            var arr=new Array();
            var access_token= window.sessionStorage.getItem('access_token');
            $.ajax({
                url: "http://localhost:8181/camel/rest/ksh/building/getBuilding",
                // methods: 'PUT',
                type:"GET",
                data: {
                    "html":floorHtml
                },
                beforeSend: function(request) {
                    request.setRequestHeader('access_token', access_token);
                },
                success: function (data) {
                    console.log(data)
                }
            })
        });
        $('#reset').click( function () {
            console.log('RESET');
            // $('#diagramContainer>:not(.my-item)').remove();
            // $('#diagramContainer>:not(.my-item)').appendTo(div1)
            var reset = '<div id="item_a" class="item1 my-item"><img src="./img/tongxin.png"><div contenteditable="true">通信中心</div></div>'+
                '<div id="item_f" class="item3 my-item" style="top: 150px;left: 215px;"><img src="./img/tongxin.png"><div contenteditable = "true">网络中心</div></div>'+ '<div id="item_b" class="abcd my-item" style="left: 85px;top: 590px"><img src="./img/tongxin.png"><div>电信1</div></div>'+ '<div id="item_c" class="abcd my-item" style="left: 140px;top: 590px"><img src="./img/tongxin.png"><div>电信2</div></div>'+ '<div id="item_d" class="abcd my-item" style="left: 315px;top: 590px"><img src="./img/tongxin.png"><div>联通1</div></div>'+ '<div id="item_e" class="abcd my-item" style="left: 370px;top: 590px"><img src="./img/tongxin.png"><div>联通2</div></div>'
            console.log('reset', reset)
            var allcookies = document.cookie;
            var arr=new Array();
            var access_token= window.sessionStorage.getItem('access_token');
            $.ajax({
                url: "http://localhost:8181/camel/rest/ksh/building/getBuilding",
                // methods: 'PUT',
                type:"GET",
                data: {
                    "html":reset
                },
                beforeSend: function(request) {
                    request.setRequestHeader('access_token', access_token);
                },
                success: function (data) {
                    console.log(data)
                }
            })
        })
    }


</script>
<!--<script>-->
    <!--window.onload=function(){-->
        <!--document.onkeydown=function(){-->
            <!--var e=window.event||arguments[0];-->
            <!--if(e.keyCode==123){-->
                <!--return false;-->
            <!--}else if((e.ctrlKey)&&(e.shiftKey)&&(e.keyCode==73)){-->
                <!--return false;-->
            <!--}-->
        <!--};-->
        <!--document.oncontextmenu=function(){-->
            <!--return false;-->
        <!--}-->
    <!--}-->
<!--</script>-->
</body>
</html>
